<template>
  <div class="card card-height2">
    <div class="card-title" v-if="info.cardTitle">{{ info.cardTitle }}</div>
    <div class="card-info" v-if="info.itemList[0] && info.itemList[0].itemUrl">
      <div class="w-100 d-flex align-items-end">
        <countTo class="value value-color2" :startVal="oldValue" :endVal="info.itemList[0].itemValue" :decimals="2" :duration="3000"></countTo>
        <span class="unit">{{ info.itemList[0].itemUnit }}</span>
      </div>
      <img :src="info.itemList[0].itemUrl" />
    </div>
  </div>
</template>

<script>
import countTo from "vue-count-to";
export default {
  name: 'card',
  components: { countTo },
  props: {
    info: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      oldValue: '',
    }
  },
  watch: {
    info: {
      handler(newVal,oldVal) {
        if(newVal.itemList[0].itemValue != this.oldValue) {
          let _this = this;
          setTimeout(() => {
            _this.oldValue = newVal.itemList[0].itemValue;
          }, 3000);
        }
      },
      deep: true,
    }
  },
  created() {
    this.oldValue = this.info.itemList[0].itemValue;
  }
}
</script>
<style lang="scss" scoped>
img {
  margin: 4% auto 0;
  max-width: calc(100% - 5px);
  max-height: calc(100% - 20px);
  display: block;
}

.card-info {
  padding: 40px 0 20px;
  flex-direction: column;
  justify-content: space-around;

  &>div {
    line-height: 40px;
    height: 40px;
  }
}

.value {
  font-family: DIN;
  font-size: 40px;
}

.unit {
  margin-left: 10px;
  font-size: 14px;
  line-height: 18px;
}
</style>
